<script setup lang="ts" name="CkColumn">
import { useLayoutStore } from '@/store/bigScreen/layoutStore'

const layoutStore = useLayoutStore()

const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {}
    }
  },
  preview: {
    type: Boolean,
    default: false
  },
  index: {
    type: Number,
    default: 0
  }
})

const setStyle = () => {
  return {
    width: props.info.options.attr.w + 'px'
  }
}

const movingRight = (v) => {
  layoutStore.moving(v, props.info, 'right')
}
const movingBottom = (v) => {
  console.log(v)
}
const movingLeft = (v) => {
  layoutStore.moving(v, props.info, 'left')
}
</script>

<template>
  <div class="drop-container column" :style="setStyle()">
    <Moving v-if="props.info.config.position !== 'right'" position="right" @change="movingRight"></Moving>
    <Moving v-if="props.info.config.position === 'root'" position="bottom" @change="movingBottom"></Moving>
    <Moving v-if="props.info.config.position !== 'left'" position="left" @change="movingLeft"></Moving>
    <div class="header drag-handle" :class="props.info.config.position">
      <svg-icon v-if="props.info.config.position === 'left'" :icon="props.info.isFold ? 'ri:arrow-right-double-fill' : 'ri:arrow-left-double-fill'"></svg-icon>
      <svg-icon v-else :icon="props.info.isFold ? 'ri:arrow-left-double-fill' : 'ri:arrow-right-double-fill'"></svg-icon>
    </div>
    <div class="column-body">
      <template v-if="props.info.children && props.info.children.length > 0">
        <template v-for="item, index in props.info.children" :key="index">
          <template v-if="item.component && item.visible">
            <component :is="item.component" :info="item" :preview="props.preview" :index="index"></component>
          </template>
        </template>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.drop-container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: -13px;
  pointer-events: none;

  .header {
    display: flex;
    height: 13px;
    pointer-events: none;

    .el-icon {
      width: auto;
      height: 13px;
      padding: 1px 6px 0;
      font-size: 12px !important;
      cursor: pointer;
      pointer-events: auto;

      &:hover{
        padding: 0 5px;
        background-color: var(--el-header-bg-color);
        border-top: 1px solid var(--el-bg-color-page);
        border-right: 1px solid var(--el-bg-color-page);
        border-left: 1px solid var(--el-bg-color-page);
      }
    }

    &.left {
      justify-content: flex-start;
    }

    &.root,
    &.right {
      justify-content: flex-end;
    }
  }

  .column-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: var(--el-header-bg-color);

    .tabs-pane+.tabs-pane {
      padding-top: 1px;
    }
  }
}
</style>
